function Partition(){
	
	this.user = null;
	this.niveau = null;
	this.connect = null;
	this.scores_arg = [];
	this.scores = [];
	
	this.initialize = function(_arg){
		this.user = _arg.user;
		this.niveau = _arg.niveau;	
	};
	this.ajouterScore = function(_arg){
		this.scores_arg.push(_arg);
	};
	
	this.run = function(){
		this.connect = new Connection();
		this.connect.initialize(parseInt(Math.random()*100000));
		var self = this;
		$(document).bind("SOCKETOK",function(){
			console.log(self.scores_arg.length);
			for (var i = 0; i < self.scores_arg.length; i++){
				self.scores_arg[i].connection = self.connect;
				self.scores_arg[i].Niveau = self.niveau;
				var score = new Score();
				score.initialize(self.scores_arg[i]);	
				self.scores.push(score);
			};
		});
		
		$('#imgPartage').click(function(e){console.log("switchCalque");});
	};
	
	this.setGomme = function(state){
		for (var i = 0; i < this.scores.length; i++){
			this.scores[i].setGomme(state);
		}
	};
	
	this.switchCalque = function(){
		for (var i = 0; i < this.scores.length; i++){
			this.scores[i].switchCalque();
		}
	};
	
	this.setTailleCrayon = function(_tailleCrayon){
		for (var i = 0; i < this.scores.length; i++){
			this.scores[i].setTailleCrayon(_tailleCrayon);
		}
	};
	this.setTailleGomme = function(_tailleGomme){
		for (var i = 0; i < this.scores.length; i++){
			this.scores[i].setTailleGomme(_tailleGomme);
		}
	};
	this.setCouleur = function(_couleur){
		for (var i = 0; i < this.scores.length; i++){
			this.scores[i].setCouleur(_couleur);
		}
	};
};

//Morceau de partition et ensemble des calques associés
function Score(){
	
	this.Calque1; //Calque du chef
	this.Calque2; //Calque du sous-chef
	this.Calque3; //Calque du musicien
	
	this.Niveau; //1 => Musicien, 2=> sous-chef, 3 => chef d'orchestre
	
	this.Width;	//Taille
	this.Height;
	
	this.CalqueActif = 3;
	
	this.initialize = function (_arg){

		//Chargement du morceau de la partition en arrière plan
		this.score = new Image();
		this.score.src = "scores/"+_arg.idScore+".png";
		this.arg = _arg;
		
		var self = this;
		//Chargement OK
		self.score.onload = function(){
			//Création du Canvas de la partition
			var canvasScore =  document.createElement("canvas");
			self.score.width *= _arg.coefficient;
			self.score.height *= _arg.coefficient;
			self.Couleur = _arg.couleur;
			self.Width = self.score.width;
			self.Height = self.score.height;
			canvasScore.width = self.Width;
			canvasScore.height = self.Height;
			canvasScore.getContext('2d').drawImage(self.score,0,0,self.score.width,self.score.height);
			canvasScore.className = "inactif";
			document.getElementById("score_"+self.arg.idScore).style.height = self.Height+10+"px";
			document.getElementById("score_"+self.arg.idScore).appendChild(canvasScore);
			
			//Calque 1 pour tout le monde
			self.Calque1 = new Calque();
			self.Calque1.initialize(self.arg.idScore,self.arg.idCalque1,self.arg.connection, self.Width, self.Height, "#FF3237", self.arg.tailleCrayon, self.arg.tailleGomme);
			
			//Calque 2 uniquement pour le sous chef et le musicien
			if (self.arg.Niveau < 3){
				self.Calque2 = new Calque();
				self.Calque2.initialize(self.arg.idScore,self.arg.idCalque2,self.arg.connection, self.Width, self.Height, "#89C122", self.arg.tailleCrayon, self.arg.tailleGomme);
			}
			
			//Calque 3 pour tout le monde
			self.Calque3 = new Calque();
			self.Calque3.initialize(self.arg.idScore,self.arg.idCalque3,self.arg.connection, self.Width, self.Height, self.Couleur, self.arg.tailleCrayon, self.arg.tailleGomme);
			
			self.Calque3.setActif();
		};	
	};
	
	this.setGomme = function(state){
		this.Calque1.setGomme(state);
		this.Calque3.setGomme(state);
		if (this.arg.Niveau < 3) this.Calque2.setGomme(state);
	};
	
	this.setTailleCrayon = function(_tailleCrayon){
		this.Calque1.setTailleCrayon(_tailleCrayon);
		this.Calque3.setTailleCrayon(_tailleCrayon);
		if (this.arg.Niveau < 3) this.Calque2.setTailleCrayon(_tailleCrayon);	
	};
	
	this.setTailleGomme = function(_tailleGomme){
		this.Calque1.setTailleGomme(_tailleGomme);
		this.Calque3.setTailleGomme(_tailleGomme);
		if (this.arg.Niveau < 3) this.Calque2.setTailleGomme(_tailleGomme);	
	};
	
	this.setCouleur = function(_couleur){
		this.Calque1.setCouleur(_couleur);
		this.Calque3.setCouleur(_couleur);
		if (this.arg.Niveau < 3) this.Calque2.setCouleur(_couleur);		
	};
	
	this.switchCalque = function(){
		if (this.arg.Niveau == 2){ //Sous chef : on switch entre le 2 et le 3
			if (this.CalqueActif == 3) {this.CalqueActif = 2 }else { this.CalqueActif = 3}; 
		}
		else if (this.arg.Niveau == 3){ //Chef, on switch entre le 1 et le 3
			if (this.CalqueActif == 3) {this.CalqueActif = 1 }else { this.CalqueActif = 3}; 
		}
		switch(this.CalqueActif){
			case 1:
				this.Calque1.setActif();
				if (this.arg.Niveau < 3)this.Calque2.setInactif();
				this.Calque3.setInactif();
				break;
			case 2:
				this.Calque1.setInactif();
				if (this.arg.Niveau < 3)this.Calque2.setActif();
				this.Calque3.setInactif();
				break;
			case 3:
				this.Calque1.setInactif();
				if (this.arg.Niveau < 3)this.Calque2.setInactif();
				this.Calque3.setActif();
				break;	
		}
	};
};


//Dessin et mise à jour automatique d'un canvas
function Calque(){
	
	//Attributs
	this.IdScore;		//Id du morceau de la partition
	this.IdCalque; 		//Id du calque
	this.Connection; 	//Connection WebSocket
	this.Canvas; 		//Canvas html
	this.Context; 		//Context 2D
	
	this.Draw = 0;			// 0 => pas de dessin, 1 => Début du dessin, 2 => Dessin
	this.tailleGomme = 20;
	this.tailleCrayon = 4;
	//Constructeur
	this.initialize = function (_IdScore, _IdCalque, _Connection, _Width, _Height, _Couleur, _TailleCrayon, _TailleGomme){
		this.IdScore = _IdScore;
		this.IdCalque = _IdCalque;
		this.Connection = _Connection;	
		this.Connection.connexionCalque(this);
		this.Gomme = false;
		this.tailleGomme = _TailleGomme;
		this.tailleCrayon = _TailleCrayon;
		
		//Ajout du canvas 
		var canvas =  document.createElement("canvas");
		canvas.id = _IdCalque;
		this.Width = _Width
		this.Height = _Height;
		canvas.width = this.Width;
		canvas.height = this.Height;
		canvas.className = "inactif"; 
		document.getElementById("score_"+_IdScore).appendChild(canvas);
		
		this.Canvas = $('#'+_IdCalque);	
		this.Context = this.Canvas[0].getContext('2d');
		
		//Texture du Trait
		this.Context.lineJoin = 'round';
		this.Context.lineCap = 'round';
		this.Context.lineWidth = this.tailleCrayon;
		this.Context.strokeStyle = _Couleur;
		this.Context.fillStyle = _Couleur;
		this.OffSet = $('#'+_IdCalque).offset();
			
		//Chargement de l'ancien calque
		var self = this;
		try{
			var src = "calques/"+self.IdCalque+".png";
			var request = new XMLHttpRequest();  
			request.open('HEAD', src, false);  
			request.send();
			
			console.log(request.status);  
			if (request.status != "404") {  
			var ancienCalque = new Image();
			var time = new Date().getTime();
			ancienCalque.src = "calques/"+self.IdCalque+".png?t="+time;
			ancienCalque.onload = function() {
				self.Context.drawImage(ancienCalque,0,0,self.Width,self.Height);
			};
			}
		}
		catch(err){}
      				
		this.Draw = 0;
		var self = this;
		this.Canvas.mousedown(function(e) { //Clique
			e.preventDefault();
			self.commencerDessin();
		});
		
		this.Canvas.bind("dragend mouseup",function(e) { //Relache
			e.preventDefault();
			self.OffSet = $('#'+_IdCalque).offset();
			var PosX = e.pageX - self.OffSet.left;
			var PosY = e.pageY - self.OffSet.top;
			self.pointFinal(PosX, PosY);
			self.finirDessin()
		});
		
		this.Canvas.mouseout(function(e) { //Sort de la zone
			e.preventDefault();
			self.finirDessin();
		});
		this.Canvas.mousemove(function(e) { //Bouge
			e.preventDefault();
			self.OffSet = $('#'+_IdCalque).offset();
			var PosX = e.pageX - self.OffSet.left;
			var PosY = e.pageY - self.OffSet.top;
			self.dessiner(PosX, PosY);
		});
		
	};
	
	this.setGomme = function(state){
		this.Gomme = state;
	};
	
	this.setTailleGomme = function(_tailleGomme){
		this.tailleGomme = _tailleGomme;	
	};
	
	this.setTailleCrayon = function(_tailleCrayon){
		this.tailleCrayon = _tailleCrayon;	
	};
	
	this.setCouleur = function(_couleur){
		this.Context.strokeStyle = _couleur;
		this.Context.fillStyle = _couleur;	
	}
	this.setActif = function(){
		this.Canvas[0].className = "actif";
	};
	
	this.setInactif = function(){
		this.Canvas[0].className = "inactif";
	};
	this.commencerDessin = function (){
		this.Draw = 1;	
	};
	
	this.pointFinal = function (_PosX, _PosY){
		if (!this.Gomme){
			this.Context.beginPath();
			this.Context.arc(_PosX, _PosY, this.tailleCrayon/2, 0, Math.PI*2, true); 
			this.Context.closePath();
			this.Context.fill();
		}else{
			this.Context.clearRect(_PosX-this.tailleGomme/2, _PosY-this.tailleGomme/2, this.tailleGomme, this.tailleGomme);
		}
		this.upload();
		
	};
	
	this.finirDessin = function(){
		if (this.Draw > 0){
			this.Draw = 0;
			this.upload();
		}
	};
	
	this.upload = function(){
		var canvasData = this.Canvas[0].toDataURL("image/png");
		var self = this;
		$.ajax({
			async: false,
			type: "POST",
			url: 'class/uploadCalque.php',
			data: {img:canvasData, id:self.IdCalque},
		});
		self.Connection.commandeANNOTATION(self.IdCalque);
	};
	
	this.dessiner = function(_PosX, _PosY){
		if (this.Draw > 0){
			if (!this.Gomme){
				console.log(_PosX);
				console.log(_PosY);
				if (this.Draw == 1){
					this.Context.beginPath();
					this.Context.moveTo(_PosX, _PosY);
					this.Draw = 2;
				}
				this.Context.lineTo(_PosX, _PosY);
				this.Context.stroke();
			}
			else{
				this.Context.clearRect(_PosX-this.tailleGomme/2, _PosY-this.tailleGomme/2, this.tailleGomme, this.tailleGomme);
			}
		}
		this.upload();
		
	};

	this.update = function(){
		
		ancienCalque = new Image();
		time = new Date().getTime();
		ancienCalque.src = "calques/"+this.IdCalque+".png?t="+time;
		var self = this;
		ancienCalque.onload = function() {
			self.Context.clearRect(0, 0, self.Canvas[0].width, self.Canvas[0].height);
        	self.Context.drawImage(ancienCalque,0,0,self.Width,self.Height);
      	};
	};
};